import React, { useState, useEffect } from 'react';
import './activityDetail.less';

import { Button } from 'antd';

import { activityLookDetailApi } from '../../../../../api/createActivity';

import { history } from 'umi';
export default function (props) {
  const [state, setState] = useState();
  const [infoTitle, setInfoTitle] = useState([
    // 基本信息 数据
    { id: 1, name: '基本信息', show: true },
    { id: 2, name: '活动信息', show: false },
  ]);

  const [initBasicInfoData, setInitBasicInfoData] = useState({}); //  初始化 数据

  const getActivityFnData = (...args) => {
    return activityLookDetailApi(...args);
  };
  useEffect(() => {
    if (history?.location?.query?.activityBasicId) {
      let id = history.location.query.activityBasicId;
      getActivityFnData({
        activityBasicId: id,
      }).then((res) => {
        if (res.data.code === 200) {
          setInitBasicInfoData(res.data.data);
        }
      });
    }
  }, []);

  const handleInfoItem = (item) => {
    //  点击 基本信息 进行 切换
    let a = infoTitle.map((m) => ({
      ...m,
      show: m.id == item.id ? true : false,
    }));
    setInfoTitle(a);
  };

  const handleBack = () => {
    history.goBack();
  };

  return (
    <div className="activity_edtail">
      <h1> 详情 </h1>

      {/* 基本信息 和 活动信息 */}
      <div className="info_arr">
        {infoTitle.map((item, index) => {
          return (
            <div
              key={item.id}
              className="info_item"
              onClick={() => handleInfoItem(item)}
            >
              <div className={item.show ? 'info_item_active' : ''}>
                {' '}
                {item.name}{' '}
              </div>
              <div className={item.show ? 'info_item_line_active' : ''}></div>
            </div>
          );
        })}
      </div>

      {/* 页面 渲染 */}
      <div>
        {/* 基本 信息 */}
        {infoTitle[0].show && (
          <div>
            <div className="basic_info_item">
              <span>活动名称:</span>
              <span> {initBasicInfoData.activityName} </span>
            </div>
            <div className="basic_info_item">
              <span>活动地点:</span>
              <span> {initBasicInfoData.activitySite} </span>
            </div>
            <div className="basic_info_item">
              <span>活动时间:</span>
              <span>
                {' '}
                {initBasicInfoData.startDate} - {initBasicInfoData.endDate}{' '}
              </span>
            </div>
            <div className="basic_info_item">
              <span>活动内容:</span>
              <span> {initBasicInfoData.activityContent} </span>
            </div>
            <div className="basic_info_item">
              <span>日程安排:</span>
              <span> {initBasicInfoData.startDate} xxx </span>
            </div>
          </div>
        )}

        {infoTitle[1].show && <div> 22222 </div>}
      </div>

      <Button type="primary" onClick={handleBack} className="btn">
        {' '}
        返回{' '}
      </Button>
    </div>
  );
}
